<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/template.xhtml">

    <ui:define name="title"><h:outputText value="Exam Session" /></ui:define>
    <ui:define name="header"><h:outputText value="Exam Session" /></ui:define>
    
    <ui:define name="content">
        <f:metadata>
            <f:viewParam name="examSessionId" value="#{examInstanceView.examSession}" converter="#{examSessionConverter}" />
        </f:metadata>

         <hr/>
            <h:outputText value="Current Date : " /><h:outputText value="&#160;" />
            <p:clock pattern="dd/MM/yyyy   " mode="server" /><h:outputText value="&#160;&#160;&#160;&#160;" />
            
            <h:outputText value="Current Time : " /><h:outputText value="&#160;" />
            <p:clock pattern="HH:mm:ss" mode="server" />   <h:outputText value="&#160;&#160;&#160;&#160;" />
            
            <h:outputText value="Exam Paper : #{examInstanceView.examSession.examPaperId.name}" />
            <hr/>
            <p:growl widgetVar="growl" showDetail="true" />
    <h:form id="examForm">    
        <p:commandButton value="Start Exam" style="float: right" actionListener="#{examInstanceView.initializeExamInstance()}" update="@form" rendered="#{examInstanceView.examInstance==null}"/>
        <p:commandButton value="Submit Exam Form" style="float: right" actionListener="#{examInstanceView.submitExamForm()}" rendered="#{examInstanceView.examInstance!=null}">
            <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
        </p:commandButton>
            <div style="clear: both;"></div>
        
            <h1>
                <h:outputText value="&#160;Section #{examInstanceView.sectionNumber+1}" rendered="#{examInstanceView.examInstance!=null}"/>
            </h1>
            <p:fieldset legend="Question #{examInstanceView.questionNumber+1} (#{examInstanceView.currentQuestion.questionId.mark} Marks)" 
                        style="margin-bottom:20px" id="qField" rendered="#{examInstanceView.examInstance!=null}">
                <p:panel rendered="#{examInstanceView.currentQuestion.questionId.text!=null}">

                    <h:outputText value="#{examInstanceView.currentQuestion.questionId.text}" />

                </p:panel><br/>
                
                <p:dataList value="#{examInstanceView.currentQuestion.examInstanceAnswerList}" var="answerIns" varStatus="status" id="qpart">
                        
                    <h3><h:outputText value="#{examInstanceView.questionNumber+1}.#{status.index+1}" /></h3>
                                
                            <p:panel>
                                <h:outputText value="#{answerIns.questionPartId.text}" />
                                
                            </p:panel>
                            
                            <p:panel
                                rendered="#{answerIns.questionPartId.questionType eq 'ESSAY'}" styleClass="questionPart">
                                <h:outputText value="Answer :" rendered="#{answerIns.questionPartId.questionType eq 'ESSAY'}"/><br/>
                                
                                <p:inputTextarea value="#{answerIns.answer}"  
                                                 rows="10" 
                                                 cols="200" 
                                                 counter="cnt" 
                                                 maxlength="1000" 
                                                 counterTemplate="{0} characters remaining." 
                                                 autoResize="false"
                                                 rendered="#{answerIns.questionPartId.questionType eq 'ESSAY'}"
                                                 id="txtbox#{examInstanceView.sectionNumber}_#{examInstanceView.questionNumber}_#{status.index}"
                                                 />
                                <br/><h:outputText id="cnt" />
                            </p:panel>
                                
                            <p:panel
                                rendered="#{answerIns.questionPartId.questionType eq 'MCMA'}" styleClass="questionPart">
                                
                                <p:selectManyCheckbox 
                                    id="chkbox#{examInstanceView.sectionNumber}_#{examInstanceView.questionNumber}_#{status.index}"
                                    value="#{answerIns.answers}" 
                                    layout="grid" columns="1" rendered="#{answerIns.questionPartId.questionType eq 'MCMA'}">
                                    <f:selectItems 
                                        value="#{answerIns.questionPartId.answerChoiceList}" 
                                        var="ansChoice" itemLabel="#{ansChoice.text}" itemValue="#{ansChoice.id}" />
                                </p:selectManyCheckbox>
                            </p:panel>
                            
                            <p:panel
                                rendered="#{answerIns.questionPartId.questionType eq 'MCSA'}" styleClass="questionPart">
                                
                                <p:selectOneRadio 
                                    id="rdbtn#{examInstanceView.sectionNumber}_#{examInstanceView.questionNumber}_#{status.index}"
                                    value="#{answerIns.answer}" layout="grid" columns="1" rendered="#{answerIns.questionPartId.questionType eq 'MCSA'}">
                                    <f:selectItems 
                                        value="#{answerIns.questionPartId.answerChoiceList}" 
                                        var="ansChoice" itemLabel="#{ansChoice.text}" itemValue="#{ansChoice.id}" />
                                </p:selectOneRadio>
                            </p:panel>
                        
                    </p:dataList>
                
            </p:fieldset>
            
            
            
            
            <p:commandButton value="Previous Question" actionListener="#{examInstanceView.previousQuestion()}" update=":examForm,@(.questionPart)" rendered="#{examInstanceView.hasPrevQuestion}"/>
            <p:commandButton value="Next Question" actionListener="#{examInstanceView.nextQuestion()}" update=":examForm,@(.questionPart)" rendered="#{examInstanceView.hasNextQuestion}" style="float: right"/>
            
            
            <p:confirmDialog global="true" showEffect="fade">
                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" actionListener="#{examInstanceView.submitExamForm()}"/>
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </p:confirmDialog>
            
            <p:dialog header="Times up" widgetVar="timesup" resizable="false" modal="true" closable="false">
                
                <h:outputText value="&#160;SUBMIT NOW !!" /><br/><br/>
                <p:commandButton value="Submit Exam" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" actionListener="#{examInstanceView.submitExamForm()}"/>
            </p:dialog>
            <p:socket onMessage="handleMessage" channel="/examtimesup" >
                
            </p:socket>
 
            <script type="text/javascript">
                    function handleMessage(facesmessage) {

                        PF('timesup').show();
                    }
            </script>
        </h:form>
        
</ui:define>

</ui:composition>

